<template>
  <div class="sidebar" :class="{ expand: expand && currentMenus.length > 0 }">
    <div class="sidebar_left">
      <div class="sidebar__logo">
        <img src="@/assets/image/logo.svg" alt="" />
      </div>
      <ul class="sidebar_left_menu">
        <li
          class="sidebar__menu_li"
          :class="{ active: currentParentMenuName === item.name }"
          v-for="item in pages"
          @click="menuClick(item.name)">
          <component :is="item.meta.icon" size="16"></component>
          <span>{{ item.meta.title }}</span>
        </li>
      </ul>
      <div class="slider_tools flex flex-column justify-center align-center">
        <el-tooltip effect="dark" content="修改主题" placement="right">
          <div class="button">
            <Platte @click="showTheme = true" />
          </div>
        </el-tooltip>
        <el-tooltip effect="dark" content="展开/收起菜单" placement="right">
          <div class="button" @click="store.changeExpand(!store.expand)">
            <component :is="expand ? ToLeft : ToRight" />
          </div>
        </el-tooltip>
      </div>
    </div>
    <transition name="sidebar">
      <div class="sidebar_right" v-show="expand && currentMenus.length > 0">
        <div class="sidebar__header">
          <img src="../../../icon.svg" alt="" />
          <h3>Element Admin</h3>
        </div>
        <div class="sidebar_right_menu">
          <el-menu :default-active="activeMenu" @select="menuClick">
            <menu-list :menus="currentMenus"></menu-list>
          </el-menu>
        </div>
      </div>
    </transition>

    <theme-setting v-model:show="showTheme" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { storeToRefs } from 'pinia';
import { pages } from '@/router';
import { useRoute, useRouter } from 'vue-router';
import menuList from './menu-list.vue';
import { useSlidebarStore } from '@/store';
import { ToLeft, ToRight, Platte } from '@icon-park/vue-next';
import themeSetting from '@/components/theme-setting/index.vue';

defineOptions({
  name: 'sidebar'
});

const route = useRoute();
const router = useRouter();

const currentMenus = ref<any[]>([]);
const activeMenu = ref('');
const showTheme = ref(false);
const store = useSlidebarStore();
const { expand } = storeToRefs(store);

const currentParentMenuName = computed(() => {
  return route.matched[1].name;
});

function menuClick(name: string) {
  router.push({ name });
}

function setMenuList() {
  let parentName = route.matched[1]?.name;
  let item = pages.find((v) => v.name === parentName);
  if (item) {
    currentMenus.value = item.children || [];
  }
}

watch(
  () => route.name as string,
  (val) => {
    activeMenu.value = val;
    setMenuList();
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.sidebar {
  height: 100%;
  display: flex;
  z-index: 1;
  background-color: #fff;
  width: 60px;
  transition: width 200ms ease;
  border-right: 1px solid var(--admin-border-color);

  .sidebar_left {
    position: relative;
    display: flex;
    flex-direction: column;
    z-index: 2;
    width: 60px;
    min-width: 60px;
    background-color: #020617;
    .sidebar__logo {
      padding: 8px;
      img {
        width: 100%;
      }
    }

    .sidebar_left_menu {
      list-style: none;
      padding: 0;
      margin: 0;
      color: #ffffffa6;
      text-align: center;

      .sidebar__menu_li {
        padding: 10px 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 13px;
        position: relative;
        transition: all 200ms;

        &::after {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          top: 10px;
          width: 4px;
          height: calc(100% - 20px);
          border-radius: 0 8px 8px 0;
          background-color: var(--el-color-primary);
          transform: translateX(-100%);
          transition: all 200ms;
        }

        &:hover {
          color: #ffffff;
        }
      }

      .active {
        color: #ffffff;
        &::after {
          transform: translateX(0);
        }
      }
    }

    .slider_tools {
      margin-top: auto;
      gap: 8px;
      padding-bottom: 8px;

      .button {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        // background-color: var(--cu-color-primary);
        // color: #fff;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      }
    }
  }
  .sidebar_right {
    position: relative;
    z-index: 1;
    min-width: 200px;
    width: 200px;
    padding: 0 5px;

    .sidebar__header {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      color: var(--el-text-color-regular);
      img {
        margin-right: 5px;
        width: 30px;
      }
      h3 {
        font-weight: normal;
      }
    }

    .sidebar_right_menu {
      .el-menu {
        border-right: 0;
      }
    }
  }
}
.sidebar.expand {
  width: 260px;
}

.sidebar-enter-active,
.sidebar-leave-active {
  transition: transform 200ms ease !important;
  transform-origin: left center;
}

.sidebar-enter-from,
.sidebar-leave-to {
  transform: translateX(-100%);
}
</style>
